<template>
	<div class="bg">
		<div v-if="show_record">
			<div class="table th">
				<div class="date">时间</div>
				<div class="add-mark">分数</div>
				<div class="mark">最后得分</div>
				<div class="note">备注</div>
			</div>
			<RecordList v-for="(record,index) in records" :key="index" :record="record"></RecordList>
			<p class="text-footer" v-if="!more">没有更多数据</p>
      <p class="text-footer" v-else-if="records.length <= 15"></p>
			<p class="text-footer" v-else>加载中</p>
		</div>
		<div v-else>
			<div class="prompt">还没有任何记录</div>
		</div>
	</div>
</template>

<script>
import { get } from '@/util'
import RecordList from '@/components/RecordList'

export default {
  data () {
    return {
      show_record: true,
      userinfo: {},
      records: [],
      page: 0,
      more: true
    }
  },
  components: {
    RecordList
  },
  methods: {
    async getRecords (init) {
      wx.showToast({
        title: '加载中',
        icon: 'loading'
      })

      if (init) {
        this.page = 0
        this.more = true
      }

      if (this.page === 0) {
        this.records = []
      }

      try {
        const data = {
          openid: this.userinfo.openId,
          page: this.page
        }
        const records = await get('/weapp/getrecord', data)
        this.records = this.records.concat(records.records)

        if (records.records.length < 15 && this.page > 0) {
          this.more = false
        }

        if (this.records.length === 0) {
          this.show_record = false
        } else {
          this.show_record = true
        }

        console.log('从后台返回的记录数据:', this.records)
        wx.hideToast()
      } catch (err) {
        console.log('错误信息', err)
        wx.hideToast()
      }
    }
  },
  onShow () {
    const userinfo = wx.getStorageSync('userinfo')
    if (userinfo.openId) {
      this.userinfo = userinfo
    }
    this.getRecords(true)
  },
  onShareAppMessage () {
    return {
      title: '为习惯赋分',
      path: '/pages/index/main',
      imgUrl: ''
    }
  },
  onReachBottom () {
    if (!this.more) {
      return false
    }
    this.page = this.page + 1
    console.log('this.page', this.page)
    this.getRecords()
  },
  onPullDownRefresh () {
    this.getRecords(true)
    wx.stopPullDownRefresh()
  }
}
</script>

<style lang="scss" scoped>
.prompt {
	margin-top: 50px;
	margin-bottom: 30px;
	font-size: 14px;
	color: #888;
	text-align: center;
}

.th {
	width: 100%;
	height: 30px;
	line-height: 30px;
	background: #EA5149;
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	display: flex;
	
	.date {
		width: 23%;
		padding-left: 60px;
	}

	.add-mark {
		width: 10%;
		margin-left: 5px;
	}

	.mark {
		width: 20%;
		margin-left: 10px;
	}

	.note {
		width: 20%;
		margin-left: 20px;
	}
}

.text-footer {
	text-align: center;
	font-size: 12px;
	margin-bottom:5px;
	padding-top: 5px;
}

</style>